<template>
    <div id="servicemanager">
    <el-row type="flex" align="middle"  justify="center" class="row-bg" style="height: 70px">
      <el-form :model="check" :rules="rules" :inline="true"  ref="check" status-icon class="demo-form-inline" label-position="left" size="small">
        <el-form-item label="商品名称" prop="goodName">
          <el-input v-model="check.goodName" placeholder="请输入商品名称"></el-input>
        </el-form-item>
        <el-form-item label="订单编号" prop="orderNum">
          <el-input v-model="check.orderNum" placeholder="请输入订单编号"></el-input>
        </el-form-item>
        <el-form-item label="顾客账号" prop="account">
          <el-input v-model="check.account" placeholder="请输入具体顾客账号"></el-input>
        </el-form-item>
        <el-form-item label="售后状态" prop="status">
          <el-select v-model="check.status" clearable  placeholder="请选择" @change="queryServices" @clear="queryServices">
            <el-option
                key="1"
                label="售后中"
                value="1">
            </el-option>
            <el-option
                key="2"
                label="售后通过"
                value="2">
            </el-option>
            <el-option
                key="3"
                label="售后退回"
                value="3">
            </el-option>
            <el-option
                key="4"
                label="已取消"
                value="4">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="queryServices">查询</el-button>
          <el-button type="primary" @click="doReset('check')">重置</el-button>
          <el-button type="primary" @click="batchDelete">批量删除</el-button>
        </el-form-item>
      </el-form>
    </el-row>
    <el-row>
      <el-col :span="24">
        <div class="grid-content bg-purple-dark">
          <el-table
              :data="pageServiceData.list"
              height="80vh"
              border
              style="width: 100%"
              @selection-change="handleSelectionChange">
            <el-table-column
                type="selection"
                :selectable="selectEnable"
                disabled="true"
                width="30">
            </el-table-column>
            <el-table-column
                prop="id"
                v-if="false">
            </el-table-column>
            <el-table-column
                label="序号"
                width="50">
              <template slot-scope="scope">
                {{scope.$index+1}}
              </template>
            </el-table-column>
            <el-table-column
                prop="orderNum"
                label="订单编号"
                width="80">
            </el-table-column>
            <el-table-column
                label="商品主图"
                width="115">
              <template slot-scope="scope">
                <el-avatar shape="square" :size="100" fit="fill" :src="scope.row.goodImg"></el-avatar>
              </template>
            </el-table-column>
            <el-table-column
                prop="goodName"
                label="商品名称"
                width="100">
            </el-table-column>
            <el-table-column
                prop="goodPrice"
                label="商品原价（元）"
                width="80">
            </el-table-column>
            <el-table-column
                prop="discount"
                label="优惠价格（元）"
                width="80">
            </el-table-column>
            <el-table-column
                prop="deductionAmount"
                label="积分抵扣金额（元）"
                width="80">
            </el-table-column>
            <el-table-column
                prop="buyNum"
                label="购买数量"
                width="80">
            </el-table-column>
            <el-table-column
                prop="actualPay"
                label="实际支付金额（元）"
                width="80">
            </el-table-column>
            <el-table-column
                label="创建时间"
                width="180">
              <template slot-scope="scope">
                <i class="el-icon-time"></i>
                <span style="margin-left: 10px">{{ scope.row.endTime}}</span>
              </template>
            </el-table-column>
            <el-table-column
                prop="status"
                label="售后状态"
                width="60">
              <template slot-scope="scope">
                <span v-if="scope.row.status === 1" style="color: #E6A23C">售后处理中</span>
                <span v-if="scope.row.status === 2" style="color: #67C23A">售后通过</span>
                <span v-if="scope.row.status === 3" style="color: #F56C6C">售后退回</span>
                <span v-if="scope.row.status === 4" style="color: #909399">已取消</span>
              </template>
            </el-table-column>
            <el-table-column
                label="操作">
              <template slot-scope="scope">
                <el-link type="primary" @click="queryDetails(scope.row)">详情</el-link>
                <el-link v-if="scope.row.status === 1" type="warning" @click="openDeals(scope.row)" style="margin-left: 10px">处理售后</el-link>
                <el-link v-if="scope.row.status === 4" type="danger" @click="deleteServices(scope.row.id)" style="margin-left: 10px">删除</el-link>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-col>
    </el-row>

    <!--分页部分-->
    <el-row type="flex" justify="center" class="el-row" style="margin-top: 30px">
      <el-col :span="24">
        <el-pagination
            background
            layout="prev,sizes, pager, next,total,jumper"
            :page-sizes="[1, 5, 10]"
            @next-click="nextPage"
            @prev-click="prevPage"
            @size-change="sizeChange"
            @current-change="currentPage"

            :page-size="pageServiceData.pageSize"
            :current-page="pageServiceData.pageNum"
            :total="pageServiceData.total"
            :page-count="pageServiceData.pages">
        </el-pagination>
      </el-col>
    </el-row>

    <!--详情部分-->
    <el-dialog :title="title" :visible.sync="servicesIsVisiable" :modal="false">
      <div>
        <div style="float: left">
          <el-card :body-style="{ padding: '20px' }" >
          </el-card>
        </div>
      <el-form :model="rowData">
        <el-steps :active="1" finish-status="success" simple style="margin-top: 20px" v-if="rowData.status===1">
          <el-step title="处理售后中" ></el-step>
          <el-step title="售后结果" ></el-step>
        </el-steps>
        <el-steps :active="2" finish-status="success" simple style="margin-top: 20px" v-if="rowData.status===2">
          <el-step title="处理售后中" ></el-step>
          <el-step title="售后通过" />
          <i style="margin-left: 20px;color: #67C23A">{{rowData.salesTime}}</i>
        </el-steps>
        <el-steps :active="2" finish-status="success" simple style="margin-top: 20px" v-if="rowData.status===3">
          <el-step title="处理售后中" ></el-step>
          <el-step title="售后退回" />
          <i style="margin-left: 20px;color: #F56C6C">{{rowData.salesTime}}</i>
        </el-steps>
        <el-descriptions v-if="rowData.status!=1" style="margin-top: 30px;margin-left: 50px">
          <el-descriptions-item label="申请用户">{{ rowData.userAccount }}</el-descriptions-item>
          <el-descriptions-item label="售后人员">{{ rowData.account }}</el-descriptions-item>
          <el-descriptions-item label="备注">
            <el-tag size="small" v-if="rowData.status===2">售后通过</el-tag>
            <el-tag size="small" v-if="rowData.status===3" style="color: #F56C6C">售后退回</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="申请原因">
            <span v-if="rowData.information === 1" style="color: #F56C6C">其他</span>
            <span v-if="rowData.information === 2" style="color: #F56C6C">收到商品破损</span>
            <span v-if="rowData.information === 3" style="color: #F56C6C">商品错发、漏发</span>
            <span v-if="rowData.information === 4" style="color: #F56C6C">商品需要维修</span>
            <span v-if="rowData.information === 5" style="color: #F56C6C">发票问题</span>
            <span v-if="rowData.information === 6" style="color: #F56C6C">收到商品与描述不符</span>
            <span v-if="rowData.information === 7" style="color: #F56C6C">商品质量问题</span>
            <span v-if="rowData.information === 8" style="color: #F56C6C">未按约定时间发货</span>
          </el-descriptions-item>
          <el-descriptions-item label="处理原因">
            <span v-if="rowData.news === 1" style="color: #F56C6C">符合退换条件</span>
            <span v-if="rowData.news === 2" style="color: #F56C6C">商品或销售行为不存在过错</span>
            <span v-if="rowData.news === 3" style="color: #F56C6C">不在保修条款内，并不符合保修政策</span>
            <span v-if="rowData.news === 4" style="color: #F56C6C">商品已被拆包使用</span>
            <span v-if="rowData.news === 5" style="color: #F56C6C">超过退换货时间</span>
          </el-descriptions-item>

          <el-descriptions-item label="订单编码">{{ rowData.orderNum }}</el-descriptions-item>
        </el-descriptions>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="servicesIsVisiable = false">取 消</el-button>
        <el-button @click="servicesIsVisiable = false">确 定</el-button>
      </div>
      </div>
    </el-dialog>


      <!--处理售后界面-->
      <el-dialog :title="tit" :visible.sync="dealsIsVisiable" :modal="false">

        <!--不通过界面-->
        <el-dialog title="处理原因" width="30%" :visible.sync="detailsIsVisiable" append-to-body>
          <el-form :model="orders">
            <el-form-item label="处理结果" prop="news" :label-width="formLabelWidth" style="margin-top: 20px">
              <el-select v-model="orders.news" clearable  placeholder="请选择">
                <el-option
                    key="1"
                    label="符合退换条件"
                    value="1">
                </el-option>
                <el-option
                    key="2"
                    label="商品或销售行为不存在过错"
                    value="2">
                </el-option>
                <el-option
                    key="3"
                    label="不在保修条款内，并不符合保修政策"
                    value="3">
                </el-option>
                <el-option
                    key="4"
                    label="商品已被拆包使用"
                    value="4">
                </el-option>
                <el-option
                    key="5"
                    label="超过退换货时间"
                    value="5">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item class="dialog-footer" style="margin-left: 150px">
<!--            <div slot="footer" class="dialog-footer">-->
              <el-button type="info" plain @click="noUse">取 消</el-button>
              <el-button type="success" plain @click="noPassClick">确 定</el-button>
<!--            </div>-->
            </el-form-item>
          </el-form>
        </el-dialog>

<!--        <el-form :model="sales">-->
<!--&lt;!&ndash;          <el-form-item label="请求用户:" :label-width="formLabelWidth" style="margin-top: 40px">&ndash;&gt;-->
<!--            <el-alert title="请求用户" type="warning" :closable="false" :description="sales.userAccount"></el-alert>-->
<!--&lt;!&ndash;          </el-form-item>&ndash;&gt;-->
<!--          <el-form-item label="申请原因:" :label-width="formLabelWidth" style="margin-top: 40px">-->
<!--&lt;!&ndash;            if(this.sales.information==1){&ndash;&gt;-->
<!--&lt;!&ndash;            this.titleInfo="其他";&ndash;&gt;-->
<!--&lt;!&ndash;            }else if(this.sales.information==2){&ndash;&gt;-->
<!--&lt;!&ndash;            this.titleInfo="收到商品破损";&ndash;&gt;-->
<!--&lt;!&ndash;            }else if(this.sales.information==3){&ndash;&gt;-->
<!--&lt;!&ndash;            this.titleInfo="商品错发、漏发";&ndash;&gt;-->
<!--&lt;!&ndash;            }else if(this.sales.information==4){&ndash;&gt;-->
<!--&lt;!&ndash;            this.titleInfo="商品需要维修";&ndash;&gt;-->
<!--&lt;!&ndash;            }else if(this.sales.information==5){&ndash;&gt;-->
<!--&lt;!&ndash;            this.titleInfo="发票问题";&ndash;&gt;-->
<!--&lt;!&ndash;            }else if(this.sales.information==6){&ndash;&gt;-->
<!--&lt;!&ndash;            this.titleInfo="收到商品与描述不符";&ndash;&gt;-->
<!--&lt;!&ndash;            }else if(this.sales.information==7){&ndash;&gt;-->
<!--&lt;!&ndash;            this.titleInfo="商品质量问题";&ndash;&gt;-->
<!--&lt;!&ndash;            }else if(this.sales.information==8){&ndash;&gt;-->
<!--&lt;!&ndash;            this.titleInfo="未按约定时间发货";&ndash;&gt;-->
<!--&lt;!&ndash;            }&ndash;&gt;-->
<!--            <el-alert title="其他" type="warning" :closable="false" v-if="sales.information===1"></el-alert>-->
<!--&lt;!&ndash;            <el-input v-model="sales.information" autocomplete="off" :disabled="true"></el-input>&ndash;&gt;-->
<!--          </el-form-item>-->
<!--          <el-form-item  :label-width="formLabelWidth" style="margin-top: 40px">-->
<!--            <hr>-->
<!--          </el-form-item>-->
<!--          <el-form-item label="售后人员:" :label-width="formLabelWidth" style="margin-top: 40px">-->
<!--            <el-input v-model="sales.account" autocomplete="off" :disabled="true"></el-input>-->
<!--          </el-form-item>-->
<!--          <el-form-item label="售后操作:" :label-width="formLabelWidth" style="margin-top: 40px">-->
<!--            <el-button type="success" round @click="pass" :disabled="active">通过</el-button>-->
<!--            <el-button type="danger" round @click="noPass" :disabled="active">不通过</el-button>-->
<!--          </el-form-item>-->
<!--        </el-form>-->

                <el-form :model="sales">
                  <el-form-item label="请求用户:" :label-width="formLabelWidth" style="margin-top: 40px">
                    <el-alert type="warning" :closable="false" :description="sales.userAccount"></el-alert>
                  </el-form-item>
                  <el-form-item label="申请原因:" :label-width="formLabelWidth" style="margin-top: 40px">
                    <el-alert type="error" :closable="false" v-if="sales.information===1" description="其他"></el-alert>
                    <el-alert type="error" :closable="false" v-if="sales.information===2" description="收到商品破损"></el-alert>
                    <el-alert type="error" :closable="false" v-if="sales.information===3" description="商品错发、漏发"></el-alert>
                    <el-alert type="error" :closable="false" v-if="sales.information===4" description="商品需要维修"></el-alert>
                    <el-alert type="error" :closable="false" v-if="sales.information===5" description="发票问题"></el-alert>
                    <el-alert type="error" :closable="false" v-if="sales.information===6" description="未收到商品,取消订单"></el-alert>
                    <el-alert type="error" :closable="false" v-if="sales.information===7" description="商品质量问题"></el-alert>
                  </el-form-item>
                    <hr>
                  <el-form-item label="售后人员:" :label-width="formLabelWidth" style="margin-top: 40px">
                    <el-alert type="warning" :closable="false" :description="sales.account"></el-alert>
                  </el-form-item>
                  <el-form-item label="售后操作:" :label-width="formLabelWidth" style="margin-top: 40px">
                    <el-button type="success" round plain @click="pass" :disabled="active">通过</el-button>
                    <el-button type="danger" round plain @click="noPass" :disabled="active">不通过</el-button>
                  </el-form-item>
                </el-form>

        <div slot="footer" class="dialog-footer">
          <h1>订单编号 : {{sales.orderNum}}</h1>
          <el-button type="info" plain @click="noDeal">取 消</el-button>
          <el-button type="success" plain @click="dealServices">确 定</el-button>
        </div>

      </el-dialog>
  </div>
</template>

<script>
export default {
  name: "servicemanager",
  data(){
    return{
      active:false,
      titleInfo:'',
      orders:{
        news:'',
        orderNum:'',
        orderState:''
      },
      //分页相关
      pageServiceData:{
        list:'',
        total:'',
        pageNum:1,
        pageSize:5,
        pages:''
      },
      //查询相关
      check:{
        goodName:'',
        orderNum:'',
        status:'',
        account:''
      },
      //详情页面
      rowData:{
        account:'',
        serviceId:'',
        salesTime:'',
        status:'',
        orderNum:'',
        information:'',
        userAccount:'',
        news:''
      },
      //售后处理页面
      sales:{
        serviceId:'',
        account:'',
        userAccount:'',
        information:'',
        news:'',
        orderNum:'',
        status:''
      },
      //订单详情弹窗是否可视
      servicesIsVisiable:false,
      dealsIsVisiable:false,
      detailsIsVisiable:false,
      formLabelWidth: '120px',
      title:'售后详情',
      tit:'售后操作',
      rules:{
        goodName: [
          { message: '商品名称', trigger: 'blur' }
        ],
        orderNum: [
          {  message: '订单编号', trigger: 'blur' }
        ],
        status: [
          {message: '请选择售后状态', trigger: 'change' }
        ]
      },
    }
  },
  methods:{
    selectEnable(row, rowIndex){
      if (row.status != 4) {
        return false;
      }else {
        return true;
      }
    },
    queryServices(){
      let orderNum = sessionStorage.getItem("orderNum")
      if(orderNum!=null && orderNum!=''){
        this.check.orderNum=orderNum;
        sessionStorage.removeItem("orderNum");
      }
      let jwt=localStorage.getItem("jwt");
      var url = '/api/services/servicesList?goodName=' + this.check.goodName + '&orderNum=' + this.check.orderNum + '&status=' + this.check.status +'&account=' + this.check.account + '&pageNum=' + this.pageServiceData.pageNum + '&pageSize=' + this.pageServiceData.pageSize;
      this.$axios.get(url,{headers:{"jwt":jwt}})
          .then(response =>{
            // console.log(response.data);
            if(response.data.code==200){
              this.pageServiceData=response.data.data;
              // console.log(this.pageServiceData);
            }else {
              this.pageServiceData.list=null;
              this.pageServiceData.pages=0;
              this.pageServiceData.total=0;
              this.pageServiceData.pageNum=1;
              this.pageServiceData.pageSize=5;
              this.$message.warning(response.data.msg);
            }
          });
      this.check.orderNum=null;
    },
    handleSelectionChange(val){
      this.multipleSelection=val;
    },
    nextPage(pageNum){
      this.pageServiceData.pageNum=pageNum;
    },
    prevPage(pageNum){
      this.pageServiceData.pageNum=pageNum;
    },
    currentPage(pageNum){
      this.pageServiceData.pageNum=pageNum;
      this.queryServices();
    },
    sizeChange(size){
      this.pageServiceData.pageSize=size;
      if (this.pageServiceData.pageNum!=1){
        this.pageServiceData.pageNum=1;
      }else{
        this.queryServices();
      }
    },
    doReset(check){
      this.$refs[check].resetFields();
      this.pageServiceData.pageSize=5;
      this.pageServiceData.pageNum=1;
      this.check.orderNum=null;
      this.queryServices();
    },
    queryDetails(row){
      let jwt=localStorage.getItem("jwt");
      this.rowData.status=row.status;
      if(row.status == 4){
        this.$alert('该售后已取消', '售后详情', {
          confirmButtonText: '确定',
          callback: action => {
          }
        })
      }else{
        this.servicesIsVisiable=true;
        this.$axios.get('api/services/servicesDetails?serviceId='+row.id,{headers:{'jwt':jwt}}).then(response =>{
          console.log(response.data.data);
          if(response.data.data.account != null && response.data.data.salesTime != null){
            this.rowData.status=row.status;
            this.rowData.orderNum=row.orderNum;
            this.rowData.account=response.data.data.account;
            this.rowData.salesTime=response.data.data.salesTime;
            this.rowData.news=response.data.data.news;
            this.rowData.information=response.data.data.information;
            this.rowData.userAccount=response.data.data.userAccount;
          }else if(response.data.data==406) {
            this.$message.warning(response.data.msg);
            this.$router.push("/login")
          }
        })
      }
    },
    openDeals(row){
      this.dealsIsVisiable=true;
      let jwt=localStorage.getItem("jwt");
      this.$axios.get('api/services/servicesDetails?serviceId='+row.id,{headers:{'jwt':jwt}}).then(response =>{
          // console.log(response.data.data);
        if(response.data.code==200){
          this.sales.serviceId=row.id;
          this.sales.status=row.status;
          this.sales.orderNum=row.orderNum;
          this.sales.information=response.data.data.information;
          this.sales.userAccount=response.data.data.userAccount;
          this.sales.account=sessionStorage.getItem("account");
          this.orders.orderNum=row.orderNum;
          if(this.sales.information===6){
            this.orders.orderState=7;
          }else{
            this.orders.orderState=6;
          }
          // console.log(this.sales);
        }else if(response.data.data==406) {
          this.$message.warning(response.data.msg);
          this.$router.push("/login")
        }

      });
    },
    pass(){
      this.active=true;
      this.sales.news=1;
      this.sales.status=2;
    },
    noPass(){
      this.active=true;
      this.sales.status=3;
      this.detailsIsVisiable=true;
    },
    noPassClick(){
      this.sales.news=this.orders.news;
      this.detailsIsVisiable=false;
    },
    noUse(){
      this.detailsIsVisiable=false;
      this.active=false;
    },
    noDeal(){
      this.active=false;
      this.dealsIsVisiable = false;
    },
    dealServices(){
      console.log(this.sales);
      let jwt=localStorage.getItem("jwt");
        this.$axios.post('api/services/serviceUpdate',this.sales,{headers:{'jwt':jwt}}).then(response =>{
          if(response.data.code==200){
            this.$axios.post('api/services/servicesDetailsUpdate',this.sales,{headers:{"jwt":jwt}}).then(resp =>{
              if(resp.data.code==200){
                this.$axios.post('api/orders/orderUpdateOrderState',this.orders,{headers:{"jwt":jwt}}).then(res =>{
                  if(resp.data.code==200){
                    this.$message.success("已成功处理售后");
                  }else if(response.data.data==406) {
                    this.$message.warning(response.data.msg);
                    this.$router.push("/login")
                  }else{
                    this.$message.error("当前管理员操作未成功,请查看后台数据");
                  }
                })
              }else if(response.data.data==406) {
                this.$message.warning(response.data.msg);
                this.$router.push("/login")
              }else{
                this.$message.error("当前管理员操作未成功,请查看后台数据");
              }
            })
          }else if(response.data.data==406) {
            this.$message.warning(response.data.msg);
            this.$router.push("/login")
          }else {
            this.$message.error("操作失败,请重试");
          }
          this.dealsIsVisiable=false;
          this.check.orderNum=this.orders.orderNum;
          this.queryServices();
        })
    },
    deleteServices(id){
      let jwt=localStorage.getItem("jwt");
      this.$axios.get('api/services/servicesDelete?id='+id,{headers:{"jwt":jwt}}).then(response => {
        if(response.data.code==200){
          this.$message.success("已成功删除");
          this.queryServices();
        }else if(response.data.data==406) {
          this.$message.warning(response.data.msg);
          this.$router.push("/login")
        }else{
          this.$message.error("操作失败,请重试");
        }
      });
    },
    batchDelete(){
      this.$confirm('是否删除?','提示',{
        confirmButtonText:'确定',
        cancelButtonClass:'取消',
        type:'warning'
      }).then(() =>{
        //确定
        let selectval = this.multipleSelection;
        let ids = [];
        selectval.forEach(e => {
          ids.push(e.id);
        });
          let jwt = localStorage.getItem("jwt");
          this.$axios.post('api/services/batchDelete',ids,{headers:{'jwt':jwt}
          }).then(response =>{
            if(response.data.code == 200){
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
              this.doReset('check');
            }else if(response.data.data==406) {
              this.$message.warning(response.data.msg);
              this.$router.push("/login")
            }else {
              this.$message({
                type: 'error',
                message: '删除失败!'
              });
            }
          })
      })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });
          });
    },
  },
  created:function () {
    this.queryServices();
  }
}
</script>

<style scoped>

</style>